<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="确认支付"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="px-20 pb-20">
					<view class="relative box-problem mb-20">
						<view class="flex flex-col absolute top-0 left-0 w-full h-full">
							<view class="flex-top"></view>
							<view class="flex-middle flex-1"></view>
							<view class="flex-bottom"></view>
						</view>
						<view class="relative top-0 z-10 p-20 px-30 pb-40">
							<view class="mt-20 problem">
								<view class="font-bold">您的问题为：</view>
								<text>{{postFrom.describe}}</text>
							</view>
							<view class="mt-20 problem" v-if="postFrom.replenishment">
								<view class="font-bold">补充说明：</view>
								<text>{{postFrom.replenishment}}</text>
							</view>
							<view class="mt-20">
								<view class="flex items-center px-10 mb-20">
									<view class="flex items-center">
										<ImageBoxVue src="/static/icons/title.png" width="35rpx" height="29rpx"></ImageBoxVue>
										<text class="text-sm ml-10">系统为您匹配到的卡牌为:</text>
									</view>
								</view>
								<view class="card-dashed flex justify-around">
									<view class="flex flex-col justify-center items-center" v-for="(item, idx) in cardList" :key="idx">
										<image :src="item.tarot.front" mode="widthFix" v-if="item.dir == 0"></image>
										<image :src="item.tarot.back" mode="widthFix" v-else></image>
										<!-- <text class="mt-10">{{item.tarot.name}}</text> -->
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="box-tips p-20 mb-20">
						<text class="text-sm font-bold ml-10">【温馨提示】</text>
						<text class="text-sm">此处匹配到的卡牌为解读过程中卡牌师参考用，非必解项,非卡牌解读模式不予解读属正常。</text>
					</view>
					<view class="box-item flex justify-between items-center mt-20">
						<view class="label">您的出生年份为</view>
						<view class="val year">{{year}}</view>
					</view>
					<view class="box-item flex justify-between items-center mt-20">
						<view class="label">您的生肖为</view>
						<view class="val birthday">{{zodiac}}</view>
					</view>
					<view class="box-item flex justify-between items-center mt-20">
						<view class="label">您的性别为</view>
						<view class="val gender">{{gender}}</view>
					</view>
					<view class="box-item flex justify-between items-center mt-20">
						<view class="label">您选择的数字为</view>
						<view class="flex items-center">
							<view class="num" :class="{'ml-20': idx != 0}" v-for="(item, idx) in selcard.split(',')" :key="idx">
								{{item}}
							</view>
						</view>
					</view>
					<view class="btn-pay flex justify-center mt-30">
						<view class="btn_pay_red flex justify-center items-center" @click="onPlay(1)">
							<text>确定支付</text>
							<view class="pay-num flex items-center">
								<ImageBoxVue src="/static/icons/red.png" width="28rpx" height="28rpx"></ImageBoxVue>
								<text>{{redPrice}}钻</text>
							</view>
							<text>解读</text>
						</view>
					</view>
					<view class="btn-pay flex justify-center mt-30">
						<view class="btn_pay_blue flex justify-center items-center" @click="onPlay(0)">
							<text>确定支付</text>
							<view class="pay-num flex items-center">
								<ImageBoxVue src="/static/icons/blue.png" width="28rpx" height="28rpx"></ImageBoxVue>
								<text>{{bluePrice}}钻</text>
							</view>
							<text>解读</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<payPopupVue v-model="popupShow" :payType="payType" :allPrice="payPrice" @pay="onPlay(payType)"></payPopupVue>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		computed,
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import config from '@/config/index.js'
	import radioCompVue from '@/components/radioComp.vue';
	import sendSettingVue from "./components/sendSetting.vue"
	import AgreementPlatformVue from '../login/components/AgreementPlatform.vue';
	import communityApi from '@/apis/apiList/communityApi';
	import indexApi from '@/apis/apiList/indexApi.js';
	import testApi from '@/apis/apiList/testApi';
	import payPopupVue from '@/components/payPopup.vue';

	const typeList = ref([])
	const posts = ref("") // 板块類型
	const bbsplateId = ref("") // 板块Id
	const bbsplate = ref({}) // 板块信息
	const postFrom = ref({
		paysts: 0, //支付方式
		sinpay: "", //支付金额
		prv: 1, //私有
		pret: 1, //解读人数
		sec: 0, //保密
		exp: 0, //游客讲解 
		obs: 0, //评论
		sdes: 1, // 是否有牌阵信息，0否 1是
		describe: "", //描述
		selcard: "", // 
		ppst: 2, // 帖子类型 0 普通贴 1定向贴 2 快速贴
		posts: 3,
		exmk: 0
	})
	const selcard = ref("") // 选数字
	const systemSetting = ref([]) // 系统设置列表
	const isAgree = ref(false)
	const items = ref([])
	const pickerRef = ref(null)
	const deckId = ref("")
	const birthday_str = ref("")
	const year = ref(0)
	const gender = ref("")
	const zodiac = ref("")
	const cardList = ref([])
	const popupShow = ref(false)
	const payType = ref()
	systemSetting.value = uni.getStorageSync('dict');
	const payList = [{
		text: "蓝钻",
		value: 0
	}, {
		text: "红钻",
		value: 1
	}]
	const redPrice = computed(() => {
		let price = 0
		systemSetting.value.map(item => {
			if (item.name == 'Fastquestion_NumberCardRed') {
				price = item.kbidc
			}
		})
		return price
	})
	const bluePrice = computed(() => {
		let price = 0
		systemSetting.value.map(item => {
			if (item.name == 'Fastquestion_NumberCardBlue') {
				price = item.kbidc + 12
			}
		})
		return price
	})
	const payPrice = computed(() => {
		if (payType.value == 1) {
			return redPrice
		} else if (payType.value == 0) {
			return bluePrice
		} else {
			return 0
		}
	})

	onLoad((option) => {
		console.log(option)
		postFrom.value.describe = option.describe
		year.value = option.year
		gender.value = option.gender
		zodiac.value = option.zodiac
		selcard.value = option.selcard
		systemSetting.value.map(item => {
			if (postFrom.value.paysts == 0) {
				if (item.name == 'Fastquestion_NumberCardBlue') {
					postFrom.value.sinpay = item.kbidc
				}
			}
			if (postFrom.value.paysts == 1) {
				if (item.name == 'Fastquestion_NumberCardRed') {
					postFrom.value.sinpay = item.kbidc
				}
			}
		})
		getWorkBbsplatelist()
		getCardList()
	})
	const onPlay = (type) => {
		payType.value = type
		if (postFrom.value.describe == '') {
			uni.showToast({
				icon: "none",
				title: "请填写您的问题！"
			})
			return
		}
		const params = {
			"member.id": uni.getStorageSync('user').id,
			"bbsplate.id": '1321849359872032768',
			...postFrom.value,
			paysts: type,
			selcard: selcard.value,
			problem: `${year.value},${zodiac.value},${gender.value}`,
			"deck.id": "1382936177731960832",
			sinpay: type == 1 ? redPrice.value : bluePrice.value,
		}
		console.log(params)
		// popupShow.value = true
		// return
		communityApi.generatePoss(params).then(res => {
			if (res.code == 200) {
				uni.showToast({
					icon: "none",
					title: '测试成功'
				})
				setTimeout(() => {
					uni.switchTab({
						url: `/pages/tabbar/user`
					})
				}, 1000)
			} else {
				popupShow.value = true
			}
		})
	}
	const handleChange = () => {
		uni.$on('chooseNum', (arr) => {
			console.log(arr)
			postFrom.value.selcard = arr.join(',')
		})
		uni.navigateTo({
			url: `/pages/views/chooseNum?num=3`
		})
	}
	const getWorkBbsplatelist = () => {
		communityApi.getWorkBbsplatelist().then(res => {
			typeList.value = res.data
		})
	}
	const getCardList = () => {
		const opt = {
			'member.id': uni.getStorageSync('user').id,
			'deck.id': '1382936177731960832',
			dsts: 1,
			ask: postFrom.value.describe
		}
		testApi.memberGenerateDrawCards(opt).then(res => {
			cardList.value = res.data.cardlist
		})
	}
</script>

<style lang="scss" scoped>
	.box-problem {

		.flex-top {
			background: url('/static/user/bg_top.png') no-repeat;
			background-size: cover;
			height: 258rpx;
		}

		.flex-middle {
			background: url('/static/user/bg_middle.png') repeat-y;
			background-size: contain;
		}

		.flex-bottom {
			background: url('/static/user/bg_bottom.png') no-repeat;
			background-size: cover;
			height: 42rpx;
		}

		.problem {
			background: #FFEFE2;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 20rpx;

			text>text {
				font-weight: 500;
				font-size: 24rpx;
				color: #3B4C52;
			}
		}

		.card-dashed {

			image {
				width: 180rpx;
			}
		}
	}

	.box-tips {
		background: #FFF7EF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		text {
			font-size: 24rpx;
			color: #D93E29;
		}
	}

	.box-item {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 28rpx 30rpx 28rpx 20rpx;

		.label {
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
		}

		.val {
			font-weight: 400;
			font-size: 26rpx;
			color: #4370C1;
			line-height: 26rpx;
			background: #E3EDFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #B4CCF7;
			padding: 12rpx;

			&.birthday {
				color: #634A97;
				background: #F2ECFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #E2D4FF;
			}

			&.gender {
				color: #C3743B;
				background: #FFE7D6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 2rpx solid #FFD8BB;
			}
		}

		.num {
			background: #E0F0FF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #C8E5FF;
			padding: 12rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #329EFF;
			line-height: 32rpx;
		}
	}

	.btn-pay {
		.btn_pay_red {
			background: url('/static/test/btn_pay_red.png') no-repeat;
			background-size: cover;
			width: 690rpx;
			height: 80rpx;
		}

		.btn_pay_blue {
			background: url('/static/test/btn_pay_blue.png') no-repeat;
			background-size: cover;
			width: 690rpx;
			height: 80rpx;
		}

		text {
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 28rpx;
		}

		.pay-num {
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 0 12rpx;
			padding: 6rpx 10rpx;

			text {
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;
				line-height: 22rpx;
				margin-left: 6rpx;
			}
		}
	}
</style>